<html>
<head>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./assets/material-icons.css">
    <link rel="stylesheet" type="text/css" href="./assets/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="./assets/starbeat.css">
    <title>STAR BEAT!</title>
    <script>
        if (navigator.language == 'zh-CN')
            window.location.href = "./index.html";
    </script>
</head>

<body>
    <nav class="nav-extended blue lighten-1">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo app-title">STAR BEAT! <p class="app-description">Tongfang Control Center</p></a>
        </div>
        <div class="nav-content">
            <ul class="tabs tabs-transparent">
                <li class="tab"><a class="active" href="#keyboard-light">Keyboard Light Controlling</a></li>
                <li class="tab"><a href="#about-app">About</a></li>
            </ul>
        </div>
    </nav>

    <div id="keyboard-light" class="tab-body col s12">
        <div class="input-field">
            <select id="color-mode">
                <option value="0" disabled selected>Select a keyboard light mode that you like...</option>
                <option value="1">Mono colors (static)</option>
                <option value="7">Signle color (static)</option>
                <option value="2">Breathing</option>
                <option value="3">Wave</option>
                <option value="4">Rainbow (static)</option>
                <option value="5">Blink</option>
                <option value="6">Gradient</option>
            </select>
            <label>Keyboard light mode</label>
        </div>
        <div class="color-operation row">
            <div class="monoColor-preview col s6">
                <input type="color" num="1" id="colorblock-1" value="#00b4ff" />
                <input type="color" num="2" id="colorblock-2" value="#00b4ff" />
                <input type="color" num="3" id="colorblock-3" value="#00b4ff" />
                <input type="color" num="4" id="colorblock-4" value="#00b4ff" />
            </div>            
            <div class="color-settings col s6">
                <div class="switch inline-block">
                    <label class="color-menu-title">Switcher</label>
                    <label>
                        Off
                        <input id="keyboard-light-switch" type="checkbox" checked>
                        <span class="lever"></span>
                        On&nbsp;&nbsp;&nbsp;
                    </label>
                </div>

                <div class="switch inline-block">
                    <label class="color-menu-title">Direction</label>
                    <label>
                        Left
                        <input id="keyboard-light-direction" type="checkbox" checked>
                        <span class="lever"></span>
                        Right
                    </label>
                </div>

            </div>
            <div class="color-sliders row">
                <div class="range-field col s6">
                    Brightness
                    <input type="range" id="keyboard-light-brightness" min="0" max="100" value="80" />
                </div>
                <div class="range-field col s6">
                    Transform speed
                    <input type="range" id="keyboard-light-speed" min="0" max="100" value="60" />
                </div>
            </div>
            <a class="waves-effect waves-light btn apply">Apply</a>
        </div>
    </div>
    <div id="about-app" class="tab-body row">
        <div class="col s4">
            <img src="./assets/images/logo2.png" width="100%">
        </div>
        <div class="col s8">
        <h4 class="about-title">Project: STAR BEAT!</h4>
        <p class="about-version">(ver 1.1)</p>

        <p class="about-descrption">An unofficial control center for Tongfang laptops*</p>
        <p class="about-copyright">Copyrigt &copy;2019 <a href="https://kirainmoe.com">Yume Maruyama (@kirainmoe)</a>, some right
            reserved.</p>
            <p><small>*<i>Project STAR BEAT!</i> is originally written for Hasee Tongfang laptops with ITE controlling chips (0x048d, 0xce00, revision 0.02).
            </small></p>
        </div>
    </div>

    <script src="./assets/materialize.min.js"></script>
    <script src="./assets/index.js"></script>
</body>

</html>